<script type="text/javascript" src="/scripts/bsn.AutoSuggest_2.1.3.js"></script>
<script type="text/javascript" src="/scripts/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.autocomplete.css"/>
<link rel="stylesheet" type="text/css" href="/styles/autosuggest_inquisitor.css"/>
    <script type="text/javascript"> 
	//<![CDATA[
function addTag()
{
		//$('#taglist').hide();
		var counter = 0;
		var mouseX = 0;
		var mouseY = 0;
		var photoId = <?php echo $ctx->photo_id; ?>;
		$('.gv_panel').attr('id','imgtag');
		//alert('ff');
		$("#imgtag img").click(function(e){ // make sure the image is click
		var imgtag = $(this).parent(); // get the div to append the tagging list
		mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
		mouseY = e.pageY - $(imgtag).offset().top;
		$('#tagit').remove(); // remove any tagit div first
		$(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><div class="text">Type any name or tag</div><input type="text" name="txtname" id="tagname" class="TagPhoto" onclick="checkUsers(<?php echo $ctx->photo_id; ?>);" onfocus="checkUsers(<?php echo $ctx->photo_id; ?>);" autocomplete="off" /><input type="hidden" name="indUserId" id="indUserId" value="" /><input type="button" name="btnsave" value="Save" id="btnsave" onclick="checkUsers(<?php echo $ctx->photo_id; ?>);" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
		$('#tagit').css({top:mouseY,left:mouseX});

		$('#tagname').focus();
		});

		$('#tagit #btnsave').live('click',function(){
		name = $('#tagname').val();
		userId = $('#indUserId').val();
		if(userId!='')
		{
		$.ajax({
		type: "POST", 
		url: "/album/index/save-tag", 
		data: "name=" + name + "&userId="+userId+"&pic_x=" + mouseX + "&pic_y=" + mouseY + "&type=insert"+"&photoId="+photoId,
		cache: true, 
		success: function(data){
		viewtag(photoId);
		$('#tagit').fadeOut();
		}
		});
		} else {
			alert('Please select valid user.');return false;
		}
		});

		$('#tagit #btncancel').live('click',function(){
		$('#tagit').fadeOut();

		});

		$('#taglist li').live('mouseover mouseout',function(event){
		id = $(this).attr("rel");
		if (event.type == "mouseover"){

		$('#view_' + id).show();
		}else{
		$('#view_' + id).hide();
		}

		});

		$('#taglist li a.remove').live('click',function(){
		id = $(this).parent().attr("rel");

		// get all tag on page load
			$.ajax({
			type: "POST", 
			url: "/album/index/save-tag", 
			data: "tag_id=" + id + "&type=remove",
			success: function(data){
				viewtag(photoId);
			}
			});
		});

		viewtag(); // get all tag on page load




}
function viewtag(pic_id)
{
	$('.gv_panel').attr('id','imgtag');
		$("#imgtag img").click(function(e){ // make sure the image is click
		var imgtag = $(this).parent(); // get the div to append the tagging list
		mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
		mouseY = e.pageY - $(imgtag).offset().top;
		$('#tagit').remove(); // remove any tagit div first
		$(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><div class="text">Type any name or tag</div><input type="text" name="txtname" id="tagname" class="TagPhoto" onclick="checkUsers(<?php echo $ctx->photo_id; ?>);" onfocus="checkUsers(<?php echo $ctx->photo_id; ?>);" autocomplete="off" /><input type="hidden" name="indUserId" id="indUserId" value="" /><input type="button" name="btnsave" value="Save" id="btnsave" onclick="checkUsers(<?php echo $ctx->photo_id; ?>);" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
		$('#tagit').css({top:mouseY,left:mouseX});

		$('#tagname').focus();
		});
		$('#taglist li').live('mouseover mouseout',function(event){
		id = $(this).attr("rel");
		if (event.type == "mouseover"){

		$('#view_' + id).show();
		}else{
		$('#view_' + id).hide();
		}

		});

	//$('#taglist').hide();
	$('.gv_panel').append('<div id="tagbox"></div>')
	//addTag();
	//alert(pic_id);
	// get the tag list with action remove
	
	$.ajax({
	type: "POST", 
	url: "/album/index/tag-list", 
	data: "pic_id=" + pic_id,
	cache: true, 
		success: function(data){
		$('#taglist ol').html(data.outputtaglist);
		}
	});
	// get the tag list for boxes
	$.ajax({
	type: "POST", 
	url: "/album/index/tag-show", 
	data: "pic_id=" + pic_id,
	cache: true, 
	success: function(data){
	$('#tagbox').html(data.outputtagshow);
	}
	});
}

function checkUsers(photoId)
{
	//alert('sss');
	$(".TagPhoto").autocomplete({
	url: '/album/index/autosuggest-contacts/'+photoId,
	sortFunction: function(a, b, filter) {
		
		var f = filter.toLowerCase();
		var fl = f.length;
		var a1 = a.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
		var a1 = a1 + String(a.data[0]).toLowerCase();
		var b1 = b.value.toLowerCase().substring(0, fl) == f ? '0' : '1';
		var b1 = b1 + String(b.data[0]).toLowerCase();
		
		if (a1 > b1) {
			return 1;
		}
		if (a1 < b1) {
			return -1;
		}
		return 0;
	},
	showResult: function(value, data) {
	//alert(value);
		if(value == '')
		{
			return '<span style="color:red;">No contacts</span>';
		} else {
			return '<span style="color:red;">' + value + '</span>';
		}
	},
	onItemSelect: function(item) {
		//alert(item.data);
		$("#indUserId").val(item.data);
	},
	maxItemsToShow: 10
	});

}

  //]]>
</script> 

		<div class="Fleft txt_sm pad_t5"> Date : <?php echo date('M d y',strtotime($ctx->albumview['added_date']));?></div>
		<div  class=" Fright">
		<?php if($ctx->addedby == $_SESSION['sess_userid']) { ?>
		<a id="create" href="javascript:void(0);" onclick="sharePhoto(<?php echo $ctx->photo_id; ?>,'<?php echo $ctx->albumview['album_id']; ?>');"><img src="/images/IconSha.png" alt="Share" title="Share" /></a>
		<? } ?>
		
		<?php $file=$ctx->photo; ?>
		<a id="delete" class="BtGray" href="javascript:void(0);" onclick="deletePhoto(<?php echo $ctx->photo_id; ?>,'<?php echo $ctx->albumview['album_id']; ?>');"><img src="/images/CloseIcon.png" alt="Delete" title="Delete" /></a>
		&nbsp;&nbsp;<span><a href="/album/index/download-file?file=<?php echo base64_encode($file); ?>"><img src="/images/DownloadIconSM.png" alt="Download" title="Download" /></a></span></div>
        <div class="clear"></div>
		
		
		